Asynchronous applications optimise their resource usage by not waiting for external calls to complete. To fully benefit from an asynchronous approach, your whole stack should be asynchronous. This means an asynchronous frontend, communication protocols, API, and any backend services, including datastores. Frameworks supporting the full asynchronous approach will make your life a lot easier. On the API and integration side, Vert.x is one of the most complete stacks. It offers asynchronous database drivers for most popular datastores like MongoDB, Redis, MySQL and even plain JDBC. This means that waiting on the datastore is no longer an issue and database calls are not slowing down your application anymore. Vert.x also offers non-blocking API’s for file access, and HTTP (REST) clients.

Get started with Vert.x

To get started with Vert.x, all you need is Java 8 and Maven installed. An excellent getting started guide can be found here: 

You’ll find further guidance here.

Use HTTP2 with Vert.x

We will use Vert.x to expose a HTTP2 server. We use HTTP2 because it gives us an asynchronous way of connecting the frontend with the backend and it has features like server push. This example shows how to setup an HTTP2 server with Vert.x:

You’ll find further guidance here.

Use MongoDB with Vert.x

For our datastore, we will be using the popular MongoDB NoSQL database. MongoDB can be used as a cloud service, so there is no hassle with installing it on your own machine. MLab offers a free plan for development purposes: Sandbox plan

Using MongoDB with Vert.x is described in detail here: Vert.x MongoDB Client
Just use your MLab account details and you are good to go.

Alternatively MongoDB can be run with docker using the following command:

docker run --name some-mongo -d mongo

Get started with Angular

Now that we have our API and datastore setup, we will create a frontend with Angular. Why Angular you ask? Well the first reason is that it is a Single Page Application (SPA). This means that after the initial page load, navigating through the application does not require additional browser loads. This is a major improvement to the User Experience (UX). The user does not need to wait after forms submissions or moving to another section of your webapp anymore. A second and very important reason to choose for Angular is it’s data binding. Angular is able to change things you see in the webpage whilst something in the JavaScript changes. So when you call one of the endpoints built in Vert.X and receive your data, Angular can render that data immediately. Without reloading the page.

Are you itching to get started now? We were, the first time we read about this. Thankfully the Angular team wrote a very good getting started tutorial.
You can find that right here: Tutorial: TOUR OF HEROES

In our workshop at JAX London 2017, we will dive deeper into this topic and we will build a complete functioning application using these technologies.